<template>
  <div class="notifications__event">
    <div class="notice-filter">
      <el-radio-group v-model="filtered" size="small">
        <el-radio-button v-for="item of eventFilters" :key="item.value" :label="item.value">
          {{ item.label }}
        </el-radio-button>
      </el-radio-group>
    </div>
    <Notice-list
      type="event"
      :data="eventNotice"
      @page-change="onPageChange"
    />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import NoticeList from './List'

export default {
  name: 'EventNotice',
  components: { NoticeList },
  computed: {
    ...mapGetters(['eventNotice']),
    eventFilters () {
      return this.$store.state.notifications.eventFilters
    },
    eventFiltered () {
      return this.$store.state.notifications.eventFiltered
    },
    filtered: {
      get () {
        return this.eventFiltered
      },
      set (value) {
        this.$store.dispatch('setEventFiltered', value)
      }
    }
  },
  methods: {
    async onPageChange ({ page, onSuccess }) {
      await this.fetchNotifications({ page })
      onSuccess()
    },
    fetchNotifications (options) {
      return this.$store.dispatch('fetchNotifications', { type: 'event', ...options })
    }
  },
  watch: {
    filtered: {
      handler () {
        this.fetchNotifications({
          unread: this.filtered === 'unread',
          participating: this.filtered === 'participating'
        })
      },
      immediate: true
    }
  }
}
</script>

